<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>身份证检测</title>
<style>

.red{color:red};
.green{color:green};

</style>
<script>
        // 要求支持新旧证
        // 旧：15 \d
        // 新：18 \d{15} (\d{2}[0-9X])?
        
 function fn(ele){
     return document.querySelector(ele);
 }
 window.onload=function(){
   
    var reg=/^[1-9]\d{14}(\d{2}[0-9x])?$/

    fn('.txt').addEventListener('keyup',function(){
        if(reg.test(this.value)){
            fn('.text').innerText="号码正确"
            fn('.text').className='text green'
        }else{
            fn('.text').innerText="请输入正确身份证号码！"
            fn('.text').className='text red'
        }
    },false);
 }
</script>
</head>
<body>
  <input type="text" class="txt"><span class="text"></span>
    

</body>
</html>